const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')//生成html
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
//需要安装 vue-loader  vue  vue-template-compiler(模板渲染)
module.exports = {
    entry: './index.js',//需要处理的入口文件
    output: {
        filename: "index.js",//自定义打包后的文件名称
        path: path.resolve(__dirname, 'dist'),//自定义名称dist
        // assetModuleFilename:"img/[name].[hash:10][ext]"//配合asset打包图片使用webpack5自带 全局
    },
    module: {
        rules: [
            //适配vue
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',//就是html文件的文件名，默认是index.html
            template: './index.html',//依赖哪一个html文件模板
            inject: 'head'
            // inject有四个值： true body head false
            // true 默认值，script标签位于html文件的 body 底部
            // body script标签位于html文件的 body 底部
            // head script标签位于html文件的 head中
            // false 不插入生成的js文件，这个几乎不会用到的
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin()
    ],
    mode: 'development'//默认 developmenet  production
}